<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人简历</title>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="shortcut icon" href="img/jinali_03.png" type="image/x-icon">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	</head>

	<body>
		<!--头部-->
		<header>
			<div class="container">
				<nav class="navbar navbar-expand-lg navbar-light">
					<a class="navbar-brand" href="#">个人简历</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"><i class="fa fa-bars"></i></span>
  </button>

					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav ml-auto">
							<li class="nav-item active">
								<a class="nav-link" href="javascript:void(0);">个人信息 <span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="javascript:void(0);">技能掌握</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="javascript:void(0);">作品展示</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="javascript:void(0);">项目经历</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="javascript:void(0);">联系方式</a>
							</li>
						</ul>
					</div>
				</nav>
			</div>
		</header>
		<div class="main">
			<!--banner-->
			<div class="banner">
				<div class="wrapper">
					<div class="container">
						<!--头像-->
						<div class="img">
							<a class="guang" href="#"></a>
							<a class="touxiang" href="#">
								<img src="img/touxiang.jpg" />
							</a>
						</div>
						<!--姓名-->
						<h2 class="name mt-5">刘洪丽</h2>
						<!--职位-->
						<p class="hobby mt-3">爱好：听音乐、看视频、打羽毛球</p>
						<a href="javascript:void(0);" class="contact">联系方式</a>
					</div>
				</div>
			</div>
			<!--自我介绍-->
			<div class="container">
				<div class="about">
					<h4 class="text-center mb-5">基本信息</h4>
					<div class="about-bottom">
						<div class="row">
							<div class="col-md-6">
								<div class="about-left">
									<div class="row">
										<div class="col-md-4">
											<p>姓名：</p>
										</div>
										<div class="col-md-8">刘洪丽</div>
									</div>
									<div class="row">
										<div class="col-md-4">
											<p>电话：</p>
										</div>
										<div class="col-md-8">15231511736</div>
									</div>
									<div class="row">
										<div class="col-md-4">
											<p>电子邮件：</p>
										</div>
										<div class="col-md-8">2901346378@qq.com</div>
									</div>
									<div class="row">
										<div class="col-md-4">
											<p>工作经验：</p>
										</div>
										<div class="col-md-8">无</div>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="about-right">
									<div class="row">
										<div class="col-md-4">
											<p>学校名称：</p>
										</div>
										<div class="col-md-8">泊头职业学院（全日制）</div>
									</div>
									<div class="row">
										<div class="col-md-4">
											<p>所学专业：</p>
										</div>
										<div class="col-md-8">web前端专业</div>
									</div>
									<div class="row">
										<div class="col-md-4">
											<p>从事职业：</p>
										</div>
										<div class="col-md-8">web前端工程师</div>
									</div>
									<div class="row">
										<div class="col-md-4">
											<p>证书名称：</p>
										</div>
										<div class="col-md-8">普通话二级甲等证书</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--专业技能-->
			<div class="container">
				<div class="skill">
					<h4 class="text-center">专业技能</h4>
					<div class="skill-bottom pb-1">
						<div class="row">
							<div class="col-md-6">
								<div class="skill-left">
									<p>
										<span>HTML</span>
										<span>80%</span>
									</p>
									<div class="progress">
										<div class="bar"></div>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="skill-left">
									<p>
										<span>CSS</span>
										<span>80%</span>
									</p>
									<div class="progress">
										<div class="bar"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6">
								<div class="skill-left">
									<p>
										<span>JavaScript</span>
										<span>60%</span>
									</p>
									<div class="progress">
										<div class="bar"></div>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="skill-left">
									<p>
										<span>jQuery</span>
										<span>60%</span>
									</p>
									<div class="progress">
										<div class="bar"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6">
								<div class="skill-left">
									<p>
										<span>Bootstrap</span>
										<span>70%</span>
									</p>
									<div class="progress">
										<div class="bar"></div>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="skill-left">
									<p>
										<span>Ajax</span>
										<span>70%</span>
									</p>
									<div class="progress">
										<div class="bar"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--作品展示-->
			<div class="container">
				<div class="gallery">
					<h4 class="text-center">作品展示</h4>
					<ul class="list">
						<li class="active">一</li>
						<li>二</li>
						<li>三</li>
					</ul>
					<div class="gallery-bottom">
						<div class="xm active">
							<div class="row">
								<div class="col-md-6">
									<div class="xm-left mb-4">
										<a href="#">
											<img src="img/xm.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/dazhongdianpingshouye/">
												<div class="title text-center mb-3">大众点评首页</div>
												<p class="text-center">大众点评网于2003年4月成立于上海。大众点评是中国领先的本地生活信息及交易平台，也是全球最早建立的独立第三方消费点评网站。大众点评不仅为用户提供商户信息、消费点评及消费优惠等信息服务，同时亦提供团购、餐厅预订、外卖及电子会员卡等O2O（Online To Offline）交易服务。</p>
											</a>
										</div>
									</div>

									<div class="xm-left mb-4">
										<a href="#">
											<img src="img/xm1.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/dazhongdianpingmeituanpaidui/">
												<div class="title text-center mb-3">大众点评美团</div>
												<p class="text-center">“美团大众点评”由美团与大众点评于2015年10月8日合并成立，业务结构来看，美团点评拥有到店餐饮、酒店旅游、在线外卖和移动出行四大板块，其中外卖是公司估值最重要的支撑。</p>
											</a>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="xm-right mb-4">
										<a href="#">
											<img src="img/xm2.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/dazhongdianpingjiazhuang/">
												<div class="title text-center mb-3">大众点评家装</div>
												<p class="text-center">整合线下传统家装公司，引入点评机制。用户可以通过平台查看装修公司的设计师、施工队的资质介绍及作品展示，以及其他用户的真实点评等信息； 将上线定金式低门槛服务，用户对这一节点满意后，再付下一轮费用； 将引入专业的第三方监理公司。</p>
											</a>
										</div>
									</div>

									<div class="xm-right">
										<a href="#">
											<img src="img/xm3.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/duitang/">
												<div class="title text-center mb-3">堆糖</div>
												<p class="text-center">堆糖提供超快捷的图文收集工具，一键收集分享兴趣，还有各种兴趣主题小组，可以轻易地找到日常生活中难以遇到的、跟自己兴趣相同的朋友。</p>
											</a>
										</div>
									</div>
								</div>
							</div>

						</div>
						<div class="xm">
							<div class="row">
								<div class="col-md-6">
									<div class="xm-left mb-4">
										<a href="#">
											<img src="img/xm4.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/tengxunxinwen/">
												<div class="title text-center mb-3">腾讯网</div>
												<p class="text-center">腾讯网是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户，致力成为最具传播力和互动性，权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务，为中国数以亿计的互联网用户提供富有创意的网上新生活。</p>
											</a>
										</div>
									</div>

									<div class="xm-left mb-4">
										<a href="#">
											<img src="img/xm5.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/hengwang/">
												<div class="title text-center mb-3">恒望科技</div>
												<p class="text-center">武汉恒望科技有限公司,位于湖北省武汉市洪山区珞喻路20号阜华大厦1105,成立于2015年,为新近成立的软件公司.公司注册资金为1000万元.由一批有想法,有志向,有创业精神的年轻人组成的创业团队。</p>
											</a>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="xm-right mb-4">
										<a href="#">
											<img src="img/xm6.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/genius/">
												<div class="title text-center mb-3">Genius</div>
												<p class="text-center">准留学生向目标国外大学提供自身信息以求得对方学校录取的过程。包括前期的选择专业、学校，中期的文书写作，填写表格及最终寄出材料等待回应的全过程。</p>
											</a>
										</div>
									</div>

									<div class="xm-right">
										<a href="#">
											<img src="img/xm7.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/repute/">
												<div class="title text-center mb-3">Repute</div>
												<p class="text-center">可读的代码，有据可查并提供免费支持</p>
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="xm">
							<div class="row">
								<div class="col-md-6">
									<div class="xm-left mb-4">
										<a href="#">
											<img src="img/xm8.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/home/">
												<div class="title text-center mb-3">Home</div>
												<p class="text-center">主页 个人资料 消息 文档</p>
											</a>
										</div>
									</div>

									<div class="xm-left mb-4">
										<a href="#">
											<img src="img/xm9.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/squarreup_responsive_web_pages/">
												<div class="title text-center mb-3">pos软件</div>
												<p class="text-center">简单，功能强大且免费的pos软件</p>
											</a>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="xm-right mb-4">
										<a href="#">
											<img src="img/xm10.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/tianya_mingyue_knife/">
												<div class="title text-center mb-3">天涯明月刀</div>
												<p class="text-center">《天涯明月刀》是腾讯北极光工作室研发的一款武侠题材的3D大型多人在线角色扮演电脑客户端游戏，于2016年07月01日在中国大陆正式公测 [1] ，由《天涯明月刀》小说改编而成。该作有丰富的社交系统，在游戏中玩家可以拜师和收徒，可以参加帮会，和帮会成员参加任务活动，还可以加入联盟、盟会，体验不同阵营之间的战斗。 [2] </p>
											</a>
										</div>
									</div>

									<div class="xm-right">
										<a href="#">
											<img src="img/xm11.png" />
										</a>
										<!--介绍详情-->
										<div class="details">
											<a href="http://cuoweidemengmei.gitee.io/taobao/">
												<div class="title text-center mb-3">淘宝</div>
												<p class="text-center">淘宝网是亚太地区较大的网络零售、商圈，由阿里巴巴集团在2003年5月创立。淘宝网 [1] 是中国深受欢迎的网购零售平台，拥有近5亿的注册用户数，每天有超过6000万的固定访客，同时每天的在线商品数已经超过了8亿件，平均每分钟售出4.8万件商品。 </p>
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--项目经历-->
			<div class="container">
				<div class="project">
					<h4 class="text-center">项目经历</h4>
					<div class="project-bottom">
						<!--学习上-->
						<div class="learn mt-5">
							<div class="row">
								<div class="col-md-3">
									<div class="project-title text-center">
										<a href="http://cuoweidemengmei.gitee.io/nuoxindangaoshouye">
											<img src="img/xm.png" />
										</a>
									</div>
								</div>
								<div class="col-md-9">
									<div class="project-detail">
										<h5>项目描述：这是模仿大众点评官网写的项目，共包括3个网页，分有首页、家装和美团。</h5>
										<p>运用的技术：</p>
										<div class="jishu pl-3">
											<p>1.使用 HTML5和CSS书写具体框架；</p>
											<p>2.运用了JS的楼层和返回顶部；</p>
											<p>3.运用CSS3中的动画效果；</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--生活上-->
						<div class="life mt-5">
							<div class="row">
								<div class="col-md-3">
									<div class="project-title">
										<a href="http://cuoweidemengmei.gitee.io/nuoxindangaoshouye">
											<img src="img/nuoxindangao.png" />
										</a>
									</div>
								</div>
								<div class="col-md-9">
									<div class="project-detail">
										<h5>项目描述：这是模仿诺心蛋糕官网写的项目，共包括5个网页，分有首页、蛋糕、礼品、企业专区和登录。</h5>
										<p>运用的技术：</p>
										<div class="jishu pl-3">
											<p>1.使用 HTML5和CSS书写具体框架；</p>
											<p>2.运用了JS的轮播和选项卡；</p>
											<p>3.运用CSS3中的滑动效果；</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--工作上-->
						<div class="work mt-5">
							<div class="row">
								<div class="col-md-3">
									<div class="project-title">
										<a href="http://cuoweidemengmei.gitee.io/nuoxindangaoshouye">
											<img src="img/huawei.png" />
										</a>
									</div>
								</div>
								<div class="col-md-9">
									<div class="project-detail">
										<h5>项目描述：这是模仿华为商城官网写的项目，共包括4个网页，分有首页、手机、专区和注册。</h5>
										<p>运用的技术：</p>
										<div class="jishu pl-3">
											<p>1.使用 HTML5和CSS书写具体框架；</p>
											<p>2.运用了JS的轮播和鼠标滑过效果；</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--联络我-->
			<div class="liaison">
				<div class="container">
					<div class="lia-me">
						<h4 class="text-center">联络我</h4>
						<div class="row">
							<div class="col-md-6">
								<div class="lia-left">
									<!--我的电话-->
									<div class="card-me">
										<h5>联系电话</h5>
										<p>15231511736</p>
									</div>
									<!--我的邮箱-->
									<div class="card-me">
										<h5>邮箱</h5>
										<p>2901346378@qq.com</p>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="lia-right">
									<!--QQ-->
									<div class="card-me">
										<h5>QQ</h5>
										<p>2901346378</p>
									</div>
									<!--微信-->
									<div class="card-me">
										<h5>微信</h5>
										<p>15231511736</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--页脚-->
		<footer>
			<p class="text-center mt-3">©创意简历。 版权所有。</p>
		</footer>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
		<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script src="js/script.js"></script>
	</body>

</html>